<template>
  <!-- start  -->
  <div style="width: 100%; height: 100%">
    <el-form :inline="true" class="demo-form-inline" style="text-align: left">
      <el-form-item :label="t('user.Fuzzyquery')" style="">
        <!-- <el-input
          v-model="searchname"
          placeholder="请输入查询的文字"
        ></el-input> -->
        <el-autocomplete
          class="inline-input"
          v-model="searchname"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="true"
          :select-when-unmatched="true"
          @select="handleSelect"
          @clear="handleClear"
          :placeholder="t('user.InputUserKeyName')"
          clearable
          size="medium"
          prefix-icon="el-icon-search"
        >
          <template v-slot="{ item }">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right">{{ item.id }}</span>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="searchclick"
          icon="el-icon-search"
          >{{ t("user.Search") }}</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="add"
          icon="el-icon-circle-plus-outline"
          >{{ t("user.Add") }}</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-dialog
      :title="t('user.UserInfo')"
      :visible.sync="showAdd" -->
    <!-- <el-dialog
      :title="t('user.UserInfo')"
      :visible="showAdd"
      @update:visible="showAdd = $event" -->
    <el-dialog
      :title="t('user.UserInfo')"
      v-model="showAdd"
      :before-close="handleDialogClose"
      center
    >
      <el-form
        :model="userdata"
        :rules="rules"
        ref="registerRef"
        label-width="100px"
      >
        <el-tabs v-model="activeName" @tab-click="tabClick" type="card">
          <el-tab-pane :label="t('user.BasicInfor')" name="first">
            <el-form-item :label="t('user.Picture')">
              <!-- <template>
            <div class="file_box">
              <div class="upload">
                <input
                  type="file"
                  id=""
                  value=""
                  name="saveFile"
                  v-on:change="tirggerFile($event)"
                />
                <img :src="userdata.form.imgURL" alt="" />
              </div>
            </div>
          </template> -->
              <el-upload
                ref="myUpload"
                name="files"
                :action="getFileUploadURL()"
                list-type="picture-card"
                :limit="1"
                class="avatar-uploader"
                :before-upload="handlePictureBeforeUpload"
                :class="{ disabled: uploadDisabled }"
                :on-preview="handlePictureCardPreview"
                :on-remove="handlePictureRemove"
                :on-success="handlePictureSuccess"
                :on-error="handlePictureError"
                :fileList="userdata.fileList"
              >
                <img
                  v-if="userdata.form.imgURL"
                  :src="userdata.form.imgURL"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <!-- <el-dialog
                :visible="dialogVisible"
                @update:visible="dialogVisible = $event" -->
              <!-- <el-dialog :visible.sync="dialogVisible" size="tiny"> -->
              <el-dialog v-model="dialogVisible" size="tiny">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 -->
            <el-form-item :label="t('user.Name')" prop="name">
              <el-tooltip
                class="item"
                effect="dark"
                :content="t('user.InputName')"
                placement="top-start"
              >
                <el-input
                  v-model="userdata.name"
                  auto-complete="off"
                  maxlength="20"
                  :placeholder="t('user.InputName')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="t('user.Password')" prop="password">
              <el-tooltip
                class="item"
                effect="dark"
                :content="t('user.InputPassword')"
                placement="top-start"
              >
                <el-input
                  type="password"
                  v-model="userdata.password"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="t('user.InputPassword')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="t('user.Password')" prop="password2">
              <el-tooltip
                class="item"
                effect="dark"
                :content="t('user.InputConfirmPassword')"
                placement="top-start"
              >
                <el-input
                  type="password"
                  v-model="userdata.password2"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="t('user.InputConfirmPassword')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="t('user.Email')" prop="email">
              <el-tooltip
                class="item"
                effect="dark"
                :content="t('user.InputEmail')"
                placement="top-start"
              >
                <el-input
                  type="email"
                  v-model="userdata.email"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="t('user.InputEmail')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="t('user.Tel')" prop="phonenumber">
              <el-tooltip
                class="item"
                effect="dark"
                :content="t('user.InputTel')"
                placement="top-start"
              >
                <el-input
                  type="tel"
                  v-model="userdata.phonenumber"
                  auto-complete="off"
                  maxlength="50"
                  :placeholder="t('user.InputTel')"
                  :validate-event="true"
                ></el-input>
              </el-tooltip>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane :label="t('user.Othter')" name="second">
            <el-form-item :label="t('user.administrator')">
              <el-switch v-model="form.flag"></el-switch>
            </el-form-item>
            <el-form-item :label="t('user.Birthday')">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  :placeholder="t('user.SelectDate')"
                  v-model="form.birthday"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
              <el-col :span="13"> </el-col>
            </el-form-item>
            <el-form-item :label="t('user.Sex')">
              <el-radio-group v-model="form.sex">
                <el-radio :label="t('user.Man')"></el-radio>
                <el-radio :label="t('user.Women')"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="t('user.Hobby')">
              <el-checkbox-group v-model="form.aihao">
                <el-checkbox
                  :label="t('user.Sports')"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  :label="t('user.Technology')"
                  name="type"
                ></el-checkbox>
                <el-checkbox :label="t('user.Music')" name="type"></el-checkbox>
                <el-checkbox
                  :label="t('user.Literature')"
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="t('user.Department')">
              <el-select
                v-model="form.depart"
                :placeholder="t('user.SelectDepartment')"
              >
                <el-option
                  :label="t('user.Department1')"
                  value="部门一"
                ></el-option>
                <el-option
                  :label="t('user.Department2')"
                  value="部门二"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item :label="t('user.Othter')">
              <el-row
                v-for="item in form.beikao"
                :key="item.message"
                style="margin-top: 5px"
              >
                <el-col :span="10">
                  <el-input
                    prefix-icon="el-icon-edit"
                    :autosize="{ minRows: 1, maxRows: 3 }"
                    :placeholder="t('user.InputContent')"
                    v-model="item.message"
                  >
                  </el-input
                ></el-col>
                <el-col :span="14" style="text-align: center"
                  ><el-button
                    type="danger"
                    @click="delbeikao(item)"
                    icon="el-icon-delete"
                  ></el-button>
                  <el-button
                    type="primary"
                    @click="addbeikaobefore(item)"
                    icon="el-icon-circle-plus-outline"
                  ></el-button>
                  <el-button
                    type="success"
                    @click="addbeikaoafter(item)"
                    icon="el-icon-circle-plus-outline"
                  ></el-button
                ></el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <el-form-item>
          <!-- 提交的时候传入的是表单的ref -->
          <el-button @click="cancel">{{ t("user.Cancel") }}</el-button>
          <el-button type="primary" @click="save()">{{
            t("user.OK")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table
      :data="users"
      border
      style="width: 100%"
      v-loading="loading"
      element-loading-text="LOADING...."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <el-table-column
        fixed
        prop="userimg"
        :label="t('user.Picture')"
        width="150"
      >
        <template v-slot="scope">
          <img
            :src="getimgurl(scope.row)"
            style="width: 80px; height: auto"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" :label="t('user.Name')"> </el-table-column>
      <el-table-column prop="email" :label="t('user.Email')"> </el-table-column>
      <el-table-column prop="phonenumber" :label="t('user.Tel')">
      </el-table-column>
      <el-table-column fixed="right" :label="t('user.Operation')" width="200">
        <template v-slot="scope">
          <el-button
            @click="edit(scope.row)"
            type="success"
            size="small"
            icon="el-icon-edit"
            >{{ t("user.Edit") }}</el-button
          >
          <el-button
            @click="deleteuser(scope.row)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            >{{ t("user.Delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <!-- end  -->
</template>

<script>
/*****************************************************************************/
/*****************************************************************************/
// Composition API
/*****************************************************************************/
/*****************************************************************************/
// 导入相关api
import {
  ref,
  toRefs,
  reactive,
  computed,
  watchEffect,
  // watch,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  getCurrentInstance,
} from "vue";

// Vuex
import { useStore } from "vuex";
// //要在js中使用国际化
import { useI18n } from "vue-i18n";
//引入路由函数
import { useRouter } from "vue-router";

import defaultimg from "../../assets/add.png";

export default {
  setup() {
    console.log("setup");
    /************************************* */
    // 全局定义属性
    /************************************* */
    const app = getCurrentInstance();
    let globalProperties = app.appContext.config.globalProperties;

    /************************************* */
    // Vuex
    /************************************* */
    const store = useStore();

    const setoperation = (operation) => {
      store.dispatch("usermanagermoudle/setoperation", operation);
    };

    /************************************* */
    // Vuex Action 辅助函数mapActions 组件内方便调用
    /************************************* */
    // vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
    // https://blog.csdn.net/weixin_41364246/article/details/117572374

    // Vue3中如何使用vuex语法糖mapGetters，mapState，mapActions，mapMutations
    // https://blog.csdn.net/qq_19788257/article/details/118963756?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control

    /************************************* */
    //初始化路由
    /************************************* */
    const router = useRouter();

    /************************************* */
    // 使用国际化定义
    /************************************* */
    const { t } = useI18n();

    /************************************* */
    // 定义响应式数据
    /************************************* */
    const data = reactive({
      // fileUploadURL: this.base_url + "/file/fileUpload",
      dialogImageUrl: "",

      dialogVisible: false,
      // 表格数据加载中：loading:true ；完毕：loading:false
      loading: true,

      // 哪一个TAB处于激活状态
      activeName: "first",

      // 第二个TAB 中的项目值 不更新数据库
      form: {
        flag: true,
        sex: "女",
        aihao: ["体育", "文学"],
        birthday: "",
        depart: "部门一",
        beikao: [{ message: "备考1" }, { message: "备考2" }],
      },
      // 模糊查询结果数组
      names: [],

      // 一个用户信息
      userdata: {
        id: -1,
        name: "",
        password: "",
        password2: "",
        email: "",
        phonenumber: "",
        userimg: "", // 图片的相对路径 真正传递到后台的图片路径

        form: {
          imgURL: defaultimg, // 图片的全路径
        },
        fileList: [], // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。
      },
      // 默认用户数据，在created 方法 中 defaultuserdata=深拷贝userdata // 清空表单：解决方案1
      defaultuserdata: {},

      // 表格
      userIndex: -1, //选中的用户索引 (-1:表示未选中)
      showAdd: false,
      isNowPage: true,
      users: [],

      // 分页
      searchname: "",
      total: 0, //实现动态绑定
      pageSize: 2,
      currentPage: 1,
    });
    /************************************* */
    // 定义计算属性 start
    /************************************* */
    const uploadDisabled = computed(() => data.userdata.userimg != "");
    const rules = computed(() => {
      const checkEmail = (rule, value, callback) => {
        console.log(
          "----------------------------------------------------------------------------"
        );
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if (!value) {
          return callback(new Error(t("user.EmailNotEmpty")));
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback();
          } else {
            t("user.InputRightEmail");
            console.log(t("user.InputRightEmail"));
            // alert(message);
            callback(new Error(t("user.InputRightEmail")));
          }
        }, 100);
      };
      const checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/;
        if (!value) {
          return callback(new Error(t("user.TelNotEmpty")));
        }
        setTimeout(() => {
          // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
          // 所以我就在前面加了一个+实现隐式转换
          if (!Number.isInteger(+value)) {
            callback(new Error(t("user.InputNumber")));
          } else {
            if (phoneReg.test(value)) {
              callback();
            } else {
              callback(new Error(t("user.InputRightTel")));
            }
          }
        }, 100);
      };
      return {
        //注意此处的return，别忘记了
        name: [
          { required: true, message: t("user.InputName") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 20, message: t("user.Min1max20") },
        ],
        password: [
          { required: true, message: t("user.InputPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 50, message: t("user.Min1max50") },
        ],
        password2: [
          { required: true, message: t("user.InputConfirmPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
          { min: 1, max: 50, message: t("user.Min1max50") },
        ],
        email: [
          {
            validator: checkEmail,
            // validator: common.checkEmail,
            trigger: "blur",
            required: true,
          },
        ],
        phonenumber: [
          {
            validator: checkPhone,
            // validator: common.checkPhone,
            trigger: "blur",
            required: true,
          },
        ],
      };
    });
    /************************************* */
    // 定义计算属性 end
    /************************************* */

    /************************************* */
    // 定义方法 start
    /************************************* */
    // 删除备考
    const delbeikao = (obj) => {
      let id = data.form.beikao.findIndex(
        (item) => item.message == obj.message
      );

      if (data.form.beikao.length == 1) {
        // 至少要有一个备考信息
        globalProperties.$message({
          showClose: true,
          message: t("user.Leastoneinfo"),
          type: "error",
        });
        return;
      }
      data.form.beikao.splice(id, 1);
    };
    // 添加备考
    const addbeikaobefore = (obj) => {
      let id = data.form.beikao.findIndex(
        (item) => item.message == obj.message
      );
      data.form.beikao.splice(id, 0, { message: "" });
    };
    const addbeikaoafter = (obj) => {
      let id =
        data.form.beikao.findIndex((item) => item.message == obj.message) + 1;
      data.form.beikao.splice(id, 0, { message: "" });
    };

    // 选项卡单击事件
    const tabClick = (tab, event) => {
      console.log(tab, event);
    };
    // Autocomplete
    const querySearchAsync = (queryString, cb) => {
      let url;
      // url = "/api/uservue/getUsersByName";
      // url = this.base_url + "/uservue/getUsersByName";
      url = "/uservue/getUsersByName"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
      let param = globalProperties.$qs.stringify({
        name: queryString,
      });
      globalProperties.$axios
        .post(url, param)
        .then((res) => {
          // console.log(res.data);

          //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
          for (let i of res.data) {
            i.value = i.name; //将想要展示的数据作为value
          }
          data.names = res.data;

          cb(res.data);
        })
        .catch((error) => {
          console.log("error====>" + JSON.stringify(error));
        });
    };
    const handleSelect = (item) => {
      app.appContext.emit("select", item);
    };
    const handleClear = () => {
      app.appContext.emit("select", {});
    };
    // 分页开始---------------------------------
    //当改变每页显示条数的选择器时会触发的事件
    const handleSizeChange = (size) => {
      // 每页显示的数量是我们选择器选中的值size
      data.pageSize = size;
      // console.log(this.pageSize); //每页下拉显示数据
      search();
    };
    //当改变当前页数的时候触发的事件
    const handleCurrentChange = (currentPage) => {
      data.currentPage = currentPage;
      // console.log(this.currentPage); //点击第几页
      search();
    };
    //获取用户记录的信息分页
    const searchclick = () => {
      data.currentPage = 1;
      search();
    };
    // async实现异步
    const search = async () => {
      var user = {};
      user.id = -1;
      user.name = data.searchname;
      user.password = "";
      user.email = "";
      user.phonenumber = "";
      user.userimg = "";
      data.loading = true;

      // await 实现同步
      await new Promise((resolve, reject) => {
        setTimeout(async () => {
          //调用 获取total数据的方法
          // console.log(0);
          counttotal(user);
          // console.log(2);
          let url;
          // url = "/api/uservue/getUsers";
          // url = this.base_url + "/uservue/getUsers";
          url = "/uservue/getUsers"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
          let param = globalProperties.$qs.stringify({
            name: data.searchname,
            start: (data.currentPage - 1) * data.pageSize,
            pageSize: data.pageSize,
          });

          await globalProperties.$axios
            .post(url, param)
            .then((res) => {
              data.users = res.data;
              data.loading = false;
              // console.log(res.data);
              //成功的时候调用resolve 这样才能执行 后面的代码alert(1)
              resolve(res);
            })
            .catch((error) => {
              console.log("error====>" + JSON.stringify(error));
              //失败的时候调用reject 这样才能执行 后面的代码alert(1)
              reject(error);
            });
        }, 500);
      });
      // alert(1);
    };
    //获取用户总条数
    const counttotal = async (user) => {
      var url;
      var param;
      // url = "/api/uservue/getUsersTotal";
      // url = this.base_url + "/uservue/getUsersTotal";
      url = "/uservue/getUsersTotal"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
      param = globalProperties.$qs.stringify(user);
      // console.log(1);
      await globalProperties.$axios
        .post(url, param)
        .then((res) => {
          data.total = res.data;
        })
        .catch((error) => {
          console.log("error====>" + JSON.stringify(error));
        });
    };
    // 分页结束---------------------------------

    //设置一个 <a-form
    // ref="registerRef"
    //  :model="form"
    // :rules="rules"
    //> ref同名属性,并使用ref(null)包装
    const registerRef = ref(null); //通过ref或reactive包裹起来让其成为响应式数据
    //2.一旦后面return {registerRef},vue3会自动绑定ref="registerRef"的组件
    //设定方法,但是要通过registerRef.value才能拿到组件
    // 保存
    const save = () => {
      registerRef.value.validate((valid) => {
        if (valid) {
          var user = {};
          user.id = data.userdata.id;
          user.name = data.userdata.name;
          user.password = data.userdata.password;
          user.email = data.userdata.email;
          user.phonenumber = data.userdata.phonenumber;
          user.userimg = data.userdata.userimg;

          var url;
          var param = null;
          if (data.userIndex == -1) {
            // 添加保存
            // url = "/api/uservue/addSaveUserData";
            // url = this.base_url + "/uservue/addSaveUserData";
            url = "/uservue/addSaveUserData"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
            param = globalProperties.$qs.stringify({
              // 使用 sq 插件对 axios 中 json 数据进行转换
              name: user.name,
              password: user.password,
              email: user.email,
              phonenumber: user.phonenumber,
              userimg: user.userimg,
            });
          } else {
            // 编辑保存
            // url = "/api/uservue/updateSaveUserData";
            // url = this.base_url + "/uservue/updateSaveUserData";
            url = "/uservue/updateSaveUserData"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
            param = globalProperties.$qs.stringify({
              // 使用 sq 插件对 axios 中 json 数据进行转换
              id: user.id,
              name: user.name,
              password: user.password,
              email: user.email,
              phonenumber: user.phonenumber,
              userimg: user.userimg,
            });
          }
          globalProperties.$axios
            .post(url, param)
            .then((response) => {
              if (data.userIndex == -1) {
                // 添加保存
                if (response != null && response.data.result == "success") {
                  search();
                  data.showAdd = false;
                  // 清空自定义用户数据
                  clearuserdata();
                  globalProperties.$message({
                    message: t("user.Success"),
                    type: "success",
                    showClose: true,
                  });
                }
              } else {
                // 编辑保存
                if (response != null && response.data.result == "success") {
                  let id = data.users.findIndex(
                    (item) => item.id == data.userIndex
                  );
                  // console.log("-------------------------");
                  // console.log(that2.users);
                  // console.log(user);
                  // that2.$set(that2.users, id, user); 报错
                  // Vue.set(that.users, id, user); 报错
                  data.users.splice(id, 1, user); // ok
                  data.showAdd = false;
                  // 清空自定义用户数据
                  clearuserdata();
                  globalProperties.$message({
                    message: t("user.Success"),
                    type: "success",
                    showClose: true,
                  });
                }
              }
            })
            .catch((error) => {
              // console.log("sssssssssssssss " + error);
              globalProperties.$message({
                showClose: true,
                message: "error====>" + JSON.stringify(error),
                type: "error",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const cancel = () => {
      data.showAdd = false;
      // 清空自定义用户数据
      clearuserdata();
    };
    // 删除图片
    const handlePictureRemove = (file, fileList) => {
      console.log(file, fileList);
      data.userdata.userimg = "";
      data.userdata.form.imgURL = defaultimg;
    };
    // 文件上传成功时的钩子
    const handlePictureSuccess = (res) => {
      data.userdata.form.imgURL = globalProperties.base_url + res.imgUrl;
      data.userdata.userimg = res.imgUrl;
      globalProperties.$notify.success({
        title: t("user.Success"),
        message: t("user.Fileuploadsuccess"),
      });
    };
    // 文件上传失败时的钩子
    const handlePictureError = (err, file, fileList) => {
      console.log(err);
      console.log(file);
      console.log(fileList);
      globalProperties.$notify.error({
        title: t("user.Error"),
        message: t("user.Fileuploaderror"),
      });
    };
    //   添加
    const add = () => {
      // vuex actions
      // this.$store.dispatch("usermanagermoudle/setoperation", "用户添加");
      // vuex actions 辅助函数mapMutations 组件内方便调用
      setoperation("用户添加");
      data.userIndex = -1;
      data.showAdd = true;
      data.userdata.id = -1;
      // 清除表单校验的提示
      if (registerRef.value) {
        registerRef.value.clearValidate();
      }
    };
    const handleDialogClose = (done) => {
      globalProperties
        .$confirm("确认关闭？")
        .then(() => {
          // 清空自定义用户数据
          clearuserdata();
          done();
        })
        .catch(() => {});
    };

    // 清空自定义用户数据
    function clearuserdata() {
      data.userdata = JSON.parse(JSON.stringify(data.defaultuserdata)); // 清空表单：解决方案1 https://blog.csdn.net/qq_43103581/article/details/104839062

      // 下面的扩展字段将来也要放到userdata中去。
      data.form = {
        flag: true,
        sex: t("user.Women"),
        aihao: [t("user.Sports"), t("user.Literature")],
        birthday: "",
        depart: t("user.Department1"),
        beikao: [
          { message: t("user.Othter1") },
          { message: t("user.Othter2") },
        ],
      };

      // 清除表单校验的提示
      if (registerRef.value) {
        registerRef.value.resetFields();
      }

      // // 清空表单：解决方案2  https://blog.csdn.net/m0_37922914/article/details/103716067
      // this.$nextTick(() => {
      //   // dom元素更新后执行，因此这里能正确复位
      //   self.userdata.id = "";
      //   self.userdata.name = "";
      //   self.userdata.password = "";
      //   self.userdata.password2 = "";
      //   self.userdata.email = "";
      //   self.userdata.phonenumber = "";
      //   self.userdata.userimg = "";
      //   self.userdata.form = {
      //     imgURL: defaultimg, // 图片的全路径
      //   };
      //   self.userdata.fileList = []; // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。
      //   // 下面的扩展字段将来也要放到userdata中去。
      //   self.form = {
      //     flag: true,
      //     sex: self.$t("user.Women"),
      //     aihao: [self.$t("user.Sports"), self.$t("user.Literature")],
      //     birthday: "",
      //     depart: self.$t("user.Department1"),
      //     beikao: [
      //       { message: self.$t("user.Othter1") },
      //       { message: self.$t("user.Othter2") },
      //     ],
      //   };
      // });
    }
    // 编辑
    const edit = (u) => {
      // vuex actions
      // this.$store.dispatch("usermanagermoudle/setoperation", "用户编辑");
      // vuex actions 辅助函数mapMutations 组件内方便调用
      setoperation("用户编辑");
      data.userIndex = Number(u.id);

      data.showAdd = true;

      data.userdata.id = u.id;
      data.userdata.name = u.name;
      data.userdata.password = u.password;
      data.userdata.password2 = u.password;
      data.userdata.email = u.email;
      data.userdata.phonenumber = u.phonenumber;
      data.userdata.form.imgURL = globalProperties.base_url + u.userimg;
      data.userdata.userimg = u.userimg;

      // 清空上传图片列表
      // this.$refs["myUpload"].clearFiles();
      data.userdata.fileList = [];
      // 图片列表中加入当前用户的图片 注意：这里仅仅是展示用，真正传递到后台的图片路径是 this.userdata.userimg

      data.userdata.fileList.push({
        name: "edit.jpg",
        url: data.userdata.form.imgURL,
      });
      // 清除表单校验的提示
      if (registerRef.value) {
        registerRef.value.clearValidate();
      }
    };
    // 图片变化
    const getimgurl = (item) => {
      return globalProperties.base_url + item.userimg;
    };
    // 取得图片上传路径
    const getFileUploadURL = () => {
      return globalProperties.base_url + "/file/fileUpload";
    };
    // 删除
    const deleteuser = (u) => {
      data.userIndex = Number(u.id);
      var delid = data.userIndex;

      var user = u;
      var url;
      var param;
      // url = "/api/uservue/delete";
      // url = this.base_url + "/uservue/delete";
      url = "/uservue/delete"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
      // 使用 sq 插件对 axios 中 json 数据进行转换
      param = globalProperties.$qs.stringify(user);
      globalProperties.$axios
        .post(url, param)
        .then((response) => {
          if (response != null && response.data.result == "success") {
            let id = data.users.findIndex((item) => item.id == delid);
            data.users.splice(id, 1);
          }
          globalProperties.$message({
            message: t("user.Success"),
            type: "success",
            showClose: true,
          });
        })
        .catch((error) => {
          globalProperties.$message({
            showClose: true,
            message: "error====>" + JSON.stringify(error),
            type: "error",
          });
        });

      // this.delete( this.users, id);
      data.userIndex = -1;
    };
    /************************************* */
    // 定义方法 end
    /************************************* */

    /************************************* */
    // 定义侦听器 VUE3中watch和watchEffect的用法  https://blog.csdn.net/qq_17355709/article/details/112723178
    /************************************* */

    watchEffect(() => {
      if (data.showAdd == false) {
        // vuex actions
        // this.$store.dispatch("usermanagermoudle/setoperation", "用户一览");
        // vuex actions 辅助函数mapMutations 组件内方便调用
        setoperation("用户一览");
      }
    });

    /************************************* */
    // 定义生命周期函数 移除了 beforeCreate、created 这两个生命周期的内容可以直接在 setup函数中定义
    /************************************* */

    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    onMounted(() => {
      console.log("onMounted");
      // // this.fileUploadURL = this.base_url + "/file/fileUpload";
      // // vuex actions
      // // this.$store.dispatch("usermanagermoudle/setoperation", "用户一览");
      // // vuex actions 辅助函数mapMutations 组件内方便调用
      // setoperation("用户一览");
      search();
      data.defaultuserdata = JSON.parse(JSON.stringify(data.userdata)); // 清空表单：解决方案1
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });

    // 返回数据方法等让 template 模板使用
    return {
      setoperation, // Vuex Action 辅助函数mapActions 组件内方便调用
      router, //初始化路由
      t, // 使用国际化定义
      /************************************* */
      // 定义响应式数据
      /************************************* */
      // data, // 所有数据
      ...toRefs(data), //讲响应式的对象变为普通对象 再加...结构，在模板中就可以直接使用属性，不用data.name
      registerRef, //表单递交验证使用，通过ref或reactive包裹起来让其成为响应式数据
      /************************************* */
      // 定义计算属性 start
      /************************************* */
      uploadDisabled,
      rules,
      /************************************* */
      // 定义方法
      /************************************* */
      // 删除备考
      delbeikao,
      addbeikaobefore, // 添加备考
      addbeikaoafter, // 添加备考
      tabClick, // 选项卡单击事件
      querySearchAsync, //名字模糊查询
      handleSelect,
      handleClear,
      handleSizeChange, // 分页 当改变每页显示条数的选择器时会触发的事件
      handleCurrentChange, // 当改变当前页数的时候触发的事件
      searchclick, //获取用户记录的信息分页
      search, // 用户记录async实现异步
      counttotal, //获取用户总条数

      save, // 表单保存
      cancel, // 表单取消
      handlePictureRemove, // 删除图片
      handlePictureSuccess, // 文件上传成功时的钩子
      handlePictureError, // 文件上传失败时的钩子
      add, //   添加
      handleDialogClose, // 表单对话框关闭
      clearuserdata, // 清空自定义用户数据
      edit, // 编辑
      getimgurl, // 图片路径变化
      getFileUploadURL, // 取得图片上传路径
      deleteuser, // 删除
    };
  },
};

// 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。

// 1、beforeCreate -> 使用 setup()

// 2、created -> 使用 setup()

// 3、beforeMount -> onBeforeMount

// 4、mounted -> onMounted

// 5、beforeUpdate -> onBeforeUpdate

// 6、updated -> onUpdated

// 7、beforeDestroy -> onBeforeUnmount

// 8、destroyed -> onUnmounted

// 9、errorCaptured -> onErrorCaptured

/*****************************************************************************/
/*****************************************************************************/
// 传统的Options API
/*****************************************************************************/
/*****************************************************************************/
// // import Vue from "vue";
// import defaultimg from "../../assets/add.png";
// // import common from "../../common/common.vue";
// // vuex actions 辅助函数mapMutations 组件内方便调用
// import { mapMutations } from "vuex";
// export default {
//   // 表单验证规则
//   data() {
//     return {
//       // fileUploadURL: this.base_url + "/file/fileUpload",
//       dialogImageUrl: "",

//       dialogVisible: false,
//       // 表格数据加载中：loading:true ；完毕：loading:false
//       loading: true,

//       // 哪一个TAB处于激活状态
//       activeName: "first",

//       // 第二个TAB 中的项目值 不更新数据库
//       form: {
//         flag: true,
//         sex: "女",
//         aihao: ["体育", "文学"],
//         birthday: "",
//         depart: "部门一",
//         beikao: [{ message: "备考1" }, { message: "备考2" }],
//       },
//       // 模糊查询结果数组
//       names: [],

//       // 一个用户信息
//       userdata: {
//         id: -1,
//         name: "",
//         password: "",
//         password2: "",
//         email: "",
//         phonenumber: "",
//         userimg: "", // 图片的相对路径 真正传递到后台的图片路径

//         form: {
//           imgURL: defaultimg, // 图片的全路径
//         },
//         fileList: [], // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。
//       },
//       // 默认用户数据，在created 方法 中 defaultuserdata=深拷贝userdata // 清空表单：解决方案1
//       defaultuserdata: {},

//       // 表格
//       userIndex: -1, //选中的用户索引 (-1:表示未选中)
//       showAdd: false,
//       isNowPage: true,
//       users: [],

//       // 分页
//       searchname: "",
//       total: 0, //实现动态绑定
//       pageSize: 2,
//       currentPage: 1,
//     };
//   },
//   //计算属性 当选中图像后 需要隐藏选择按钮图片
//   computed: {
//     uploadDisabled: function () {
//       // alert(this.userdata.userimg != "");
//       return this.userdata.userimg != "";
//     },

//     // 表单验证规则
//     rules() {
//       const checkEmail = (rule, value, callback) => {
//         // alert(Vue);
//         console.log(
//           "----------------------------------------------------------------------------"
//         );
//         // console.log(Vue);
//         // console.log(Vue._instance);
//         // console.log(Vue._instance.proxy);
//         // let self = this;
//         console.log(this);
//         const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
//         if (!value) {
//           return callback(new Error(this.$t("user.EmailNotEmpty")));
//         }
//         setTimeout(() => {
//           if (mailReg.test(value)) {
//             callback();
//           } else {
//             // alert(Vue._instance.proxy.$t("user.InputRightEmail"));
//             // let message = Vue._instance.proxy.$t("user.InputRightEmail");
//             this.$t("user.InputRightEmail");
//             console.log(this.$t("user.InputRightEmail"));
//             // alert(message);
//             callback(new Error(this.$t("user.InputRightEmail")));
//           }
//         }, 100);
//       };
//       const checkPhone = (rule, value, callback) => {
//         const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/;
//         if (!value) {
//           return callback(new Error(this.$t("user.TelNotEmpty")));
//         }
//         setTimeout(() => {
//           // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
//           // 所以我就在前面加了一个+实现隐式转换
//           if (!Number.isInteger(+value)) {
//             callback(new Error(this.$t("user.InputNumber")));
//           } else {
//             if (phoneReg.test(value)) {
//               callback();
//             } else {
//               callback(new Error(this.$t("user.InputRightTel")));
//             }
//           }
//         }, 100);
//       };
//       var self = this;
//       return {
//         //注意此处的return，别忘记了
//         name: [
//           { required: true, message: this.$t("user.InputName") }, // 'blur'是鼠标失去焦点的时候会触发验证
//           { min: 1, max: 20, message: this.$t("user.Min1max20") },
//         ],
//         password: [
//           { required: true, message: this.$t("user.InputPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
//           { min: 1, max: 50, message: this.$t("user.Min1max50") },
//         ],
//         password2: [
//           { required: true, message: this.$t("user.InputConfirmPassword") }, // 'blur'是鼠标失去焦点的时候会触发验证
//           { min: 1, max: 50, message: this.$t("user.Min1max50") },
//         ],
//         email: [
//           {
//             validator: checkEmail.bind(self),
//             // validator: common.checkEmail,
//             trigger: "blur",
//             required: true,
//           },
//         ],
//         phonenumber: [
//           {
//             validator: checkPhone.bind(self),
//             // validator: common.checkPhone,
//             trigger: "blur",
//             required: true,
//           },
//         ],
//       };
//     },
//   },
//   methods: {
//     // vuex actions 辅助函数mapMutations 组件内方便调用
//     ...mapMutations(
//       { setoperation: "usermanagermoudle/setoperation" }
//       // { setloginuser5: "setoperation" }
//     ),
//     // 删除备考
//     delbeikao(obj) {
//       let id = this.form.beikao.findIndex(
//         (item) => item.message == obj.message
//       );
//       var that = this;
//       if (this.form.beikao.length == 1) {
//         // 至少要有一个备考信息
//         this.$message({
//           showClose: true,
//           message: that.$t("user.Leastoneinfo"),
//           type: "error",
//         });
//         return;
//       }
//       this.form.beikao.splice(id, 1);
//     },
//     // 添加备考
//     addbeikaobefore(obj) {
//       let id = this.form.beikao.findIndex(
//         (item) => item.message == obj.message
//       );
//       this.form.beikao.splice(id, 0, { message: "" });
//     },
//     addbeikaoafter(obj) {
//       let id =
//         this.form.beikao.findIndex((item) => item.message == obj.message) + 1;
//       this.form.beikao.splice(id, 0, { message: "" });
//     },
//     // 选项卡单击事件
//     tabClick(tab, event) {
//       console.log(tab, event);
//     },
//     // Autocomplete
//     querySearchAsync(queryString, cb) {
//       let url;
//       // url = "/api/uservue/getUsersByName";
//       // url = this.base_url + "/uservue/getUsersByName";
//       url = "/uservue/getUsersByName"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//       let data = this.$qs.stringify({
//         name: queryString,
//       });
//       var that = this;
//       this.$axios
//         .post(url, data)
//         .then((res) => {
//           // console.log(res.data);

//           //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
//           for (let i of res.data) {
//             i.value = i.name; //将想要展示的数据作为value
//           }
//           that.names = res.data;

//           cb(res.data);
//         })
//         .catch((error) => {
//           console.log("error====>" + JSON.stringify(error));
//         });
//     },
//     handleSelect(item) {
//       this.$emit("select", item);
//     },
//     handleClear() {
//       this.$emit("select", {});
//     },

//     // 分页开始---------------------------------
//     //当改变每页显示条数的选择器时会触发的事件
//     handleSizeChange(size) {
//       // 每页显示的数量是我们选择器选中的值size
//       this.pageSize = size;
//       // console.log(this.pageSize); //每页下拉显示数据
//       this.search();
//     },
//     //当改变当前页数的时候触发的事件
//     handleCurrentChange(currentPage) {
//       this.currentPage = currentPage;
//       // console.log(this.currentPage); //点击第几页
//       this.search();
//     },
//     //获取用户记录的信息分页
//     searchclick() {
//       this.currentPage = 1;
//       this.search();
//     },
//     // async实现异步
//     async search() {
//       var user = {};
//       user.id = -1;
//       user.name = this.searchname;
//       user.password = "";
//       user.email = "";
//       user.phonenumber = "";
//       user.userimg = "";
//       this.loading = true;
//       var that = this;
//       // await 实现同步
//       await new Promise((resolve, reject) => {
//         setTimeout(async () => {
//           //调用 获取total数据的方法
//           // console.log(0);
//           that.counttotal(user);
//           // console.log(2);
//           let url;
//           // url = "/api/uservue/getUsers";
//           // url = this.base_url + "/uservue/getUsers";
//           url = "/uservue/getUsers"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//           let data = that.$qs.stringify({
//             name: that.searchname,
//             start: (that.currentPage - 1) * that.pageSize,
//             pageSize: that.pageSize,
//           });

//           await that.$axios
//             .post(url, data)
//             .then((res) => {
//               that.users = res.data;
//               that.loading = false;
//               // console.log(res.data);
//               //成功的时候调用resolve 这样才能执行 后面的代码alert(1)
//               resolve(res);
//             })
//             .catch((error) => {
//               console.log("error====>" + JSON.stringify(error));
//               //失败的时候调用reject 这样才能执行 后面的代码alert(1)
//               reject(error);
//             });
//         }, 500);
//       });
//       // alert(1);
//     },
//     //获取用户总条数
//     async counttotal(user) {
//       var url;
//       var data;

//       // url = "/api/uservue/getUsersTotal";
//       // url = this.base_url + "/uservue/getUsersTotal";
//       url = "/uservue/getUsersTotal"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//       data = this.$qs.stringify(user);
//       // console.log(1);
//       await this.$axios
//         .post(url, data)
//         .then((res) => {
//           this.total = res.data;
//           //  alert(res.data);
//           // console.log(3);
//         })
//         .catch((error) => {
//           console.log("error====>" + JSON.stringify(error));
//         });
//     },
//     // 分页结束---------------------------------
//     // 保存
//     save(formName) {
//       // console.log(this.userdata);
//       let that = this;
//       that.$refs[formName].validate((valid) => {
//         if (valid) {
//           var user = {};

//           user.id = that.userdata.id;
//           user.name = that.userdata.name;
//           user.password = that.userdata.password;
//           user.email = that.userdata.email;
//           user.phonenumber = that.userdata.phonenumber;
//           user.userimg = that.userdata.userimg;

//           var url;
//           var data;
//           if (that.userIndex == -1) {
//             // 添加保存
//             // url = "/api/uservue/addSaveUserData";
//             // url = this.base_url + "/uservue/addSaveUserData";
//             url = "/uservue/addSaveUserData"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//             data = that.$qs.stringify({
//               // 使用 sq 插件对 axios 中 json 数据进行转换
//               name: user.name,
//               password: user.password,
//               email: user.email,
//               phonenumber: user.phonenumber,
//               userimg: user.userimg,
//             });
//           } else {
//             // 编辑保存
//             // url = "/api/uservue/updateSaveUserData";
//             // url = this.base_url + "/uservue/updateSaveUserData";
//             url = "/uservue/updateSaveUserData"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//             data = that.$qs.stringify({
//               // 使用 sq 插件对 axios 中 json 数据进行转换
//               id: user.id,
//               name: user.name,
//               password: user.password,
//               email: user.email,
//               phonenumber: user.phonenumber,
//               userimg: user.userimg,
//             });
//           }
//           let that2 = that;
//           that.$axios
//             .post(url, data)
//             .then((response) => {
//               if (that2.userIndex == -1) {
//                 // 添加保存
//                 if (response != null && response.data.result == "success") {
//                   that2.search();
//                   that2.showAdd = false;
//                 }
//               } else {
//                 // 编辑保存
//                 if (response != null && response.data.result == "success") {
//                   let id = that2.users.findIndex(
//                     (item) => item.id == that2.userIndex
//                   );
//                   // console.log("-------------------------");
//                   // console.log(that2.users);
//                   // console.log(user);
//                   // that2.$set(that2.users, id, user); 报错
//                   // Vue.set(that.users, id, user); 报错
//                   that2.users.splice(id, 1, user); // ok
//                   that2.showAdd = false;
//                 }
//               }
//               // 清空自定义用户数据
//               that2.clearuserdata();
//               that2.$message({
//                 message: that2.$t("user.Success"),
//                 type: "success",
//                 showClose: true,
//               });
//             })
//             .catch((error) => {
//               // console.log("sssssssssssssss " + error);
//               that.$message({
//                 showClose: true,
//                 message: "error====>" + JSON.stringify(error),
//                 type: "error",
//               });
//             });
//         } else {
//           console.log("error submit!!");
//           return false;
//         }
//       });
//     },
//     // 关闭对话框
//     cancel() {
//       // // vuex actions
//       // // this.$store.dispatch("usermanagermoudle/setoperation", "用户一览");
//       // // vuex actions 辅助函数mapMutations 组件内方便调用
//       // this.setoperation("用户一览");
//       this.showAdd = false;
//       // 清空自定义用户数据
//       this.clearuserdata();
//     },
//     handlePictureBeforeUpload(file) {
//       console.log(file);
//       // alert(this.base_url);
//     },
//     // 上传图片
//     handlePictureRemove(file, fileList) {
//       console.log(file, fileList);
//       this.userdata.userimg = "";
//       this.userdata.form.imgURL = defaultimg;
//     },
//     handlePictureCardPreview(file) {
//       this.dialogImageUrl = file.url;
//       this.dialogVisible = true;
//     },
//     // 文件上传成功时的钩子
//     // handlePictureSuccess(res, file, fileList) {
//     handlePictureSuccess(res) {
//       this.userdata.form.imgURL = this.base_url + res.imgUrl;
//       this.userdata.userimg = res.imgUrl;
//       var that = this;
//       this.$notify.success({
//         title: that.$t("user.Success"),
//         message: that.$t("user.Fileuploadsuccess"),
//       });
//     },
//     // 文件上传失败时的钩子
//     // handlePictureError(err, file, fileList) {
//     handlePictureError(err, file, fileList) {
//       console.log(err);
//       console.log(file);
//       console.log(fileList);
//       var that = this;
//       this.$notify.error({
//         title: that.$t("user.Error"),
//         message: that.$t("user.Fileuploaderror"),
//       });
//     },
//     //   添加
//     add() {
//       // vuex actions
//       // this.$store.dispatch("usermanagermoudle/setoperation", "用户添加");
//       // vuex actions 辅助函数mapMutations 组件内方便调用
//       this.setoperation("用户添加");
//       this.userIndex = -1;
//       this.showAdd = true;
//       this.userdata.id = -1;
//       // 清除表单校验的提示
//       if (this.$refs["registerRef"]) {
//         this.$refs["registerRef"].clearValidate();
//       }
//     },
//     handleDialogClose(done) {
//       let that = this;
//       this.$confirm("确认关闭？")
//         .then(() => {
//           // 清空自定义用户数据
//           that.clearuserdata();
//           done();
//         })
//         .catch(() => {});
//     },
//     // 清空自定义用户数据
//     clearuserdata() {
//       var self = this;

//       this.userdata = JSON.parse(JSON.stringify(this.defaultuserdata)); // 清空表单：解决方案1 https://blog.csdn.net/qq_43103581/article/details/104839062
//       // 下面的扩展字段将来也要放到userdata中去。
//       self.form = {
//         flag: true,
//         sex: self.$t("user.Women"),
//         aihao: [self.$t("user.Sports"), self.$t("user.Literature")],
//         birthday: "",
//         depart: self.$t("user.Department1"),
//         beikao: [
//           { message: self.$t("user.Othter1") },
//           { message: self.$t("user.Othter2") },
//         ],
//       };

//       // 清除表单校验的提示
//       if (self.$refs["registerRef"]) {
//         self.$refs["registerRef"].resetFields();
//       }

//       // // 清空表单：解决方案2  https://blog.csdn.net/m0_37922914/article/details/103716067
//       // this.$nextTick(() => {
//       //   // dom元素更新后执行，因此这里能正确复位

//       //   self.userdata.id = "";
//       //   self.userdata.name = "";
//       //   self.userdata.password = "";
//       //   self.userdata.password2 = "";
//       //   self.userdata.email = "";
//       //   self.userdata.phonenumber = "";
//       //   self.userdata.userimg = "";
//       //   self.userdata.form = {
//       //     imgURL: defaultimg, // 图片的全路径
//       //   };
//       //   self.userdata.fileList = []; // 编辑状态的时候 图片显示在默认列表中，主要是为了展示用。

//       //   // 下面的扩展字段将来也要放到userdata中去。
//       //   self.form = {
//       //     flag: true,
//       //     sex: self.$t("user.Women"),
//       //     aihao: [self.$t("user.Sports"), self.$t("user.Literature")],
//       //     birthday: "",
//       //     depart: self.$t("user.Department1"),
//       //     beikao: [
//       //       { message: self.$t("user.Othter1") },
//       //       { message: self.$t("user.Othter2") },
//       //     ],
//       //   };
//       // });
//     },
//     // 编辑
//     edit(u) {
//       // vuex actions
//       // this.$store.dispatch("usermanagermoudle/setoperation", "用户编辑");
//       // vuex actions 辅助函数mapMutations 组件内方便调用
//       this.setoperation("用户编辑");
//       this.userIndex = Number(u.id);

//       this.showAdd = true;

//       this.userdata.id = u.id;
//       this.userdata.name = u.name;
//       this.userdata.password = u.password;
//       this.userdata.password2 = u.password;
//       this.userdata.email = u.email;
//       this.userdata.phonenumber = u.phonenumber;
//       this.userdata.form.imgURL = this.base_url + u.userimg;
//       this.userdata.userimg = u.userimg;

//       // 清空上传图片列表
//       // this.$refs["myUpload"].clearFiles();
//       this.userdata.fileList = [];
//       // 图片列表中加入当前用户的图片 注意：这里仅仅是展示用，真正传递到后台的图片路径是 this.userdata.userimg

//       this.userdata.fileList.push({
//         name: "edit.jpg",
//         url: this.userdata.form.imgURL,
//       });
//       // 清除表单校验的提示
//       if (this.$refs["registerRef"]) {
//         this.$refs["registerRef"].clearValidate();
//       }
//     },
//     // 图片变化
//     getimgurl(item) {
//       return this.base_url + item.userimg;
//     },
//     // 取得图片上传路径
//     getFileUploadURL() {
//       return this.base_url + "/file/fileUpload";
//     },
//     // 删除
//     deleteuser(u) {
//       this.userIndex = Number(u.id);
//       var delid = this.userIndex;
//       var that = this;
//       var user = u;
//       var url;
//       var data;
//       // url = "/api/uservue/delete";
//       // url = this.base_url + "/uservue/delete";
//       url = "/uservue/delete"; // this.base_url  ⇒移动到main.js 拦截器中 config.baseURL =this.base_url;
//       // 使用 sq 插件对 axios 中 json 数据进行转换
//       data = that.$qs.stringify(user);
//       this.$axios
//         .post(url, data)
//         .then((response) => {
//           if (response != null && response.data.result == "success") {
//             let id = that.users.findIndex((item) => item.id == delid);
//             this.users.splice(id, 1);
//           }
//           this.$message({
//             message: that.$t("user.Success"),
//             type: "success",
//             showClose: true,
//           });
//         })
//         .catch((error) => {
//           this.$message({
//             showClose: true,
//             message: "error====>" + JSON.stringify(error),
//             type: "error",
//           });
//         });

//       // this.delete( this.users, id);
//       this.userIndex = -1;
//     },
//   },
//   created: function () {
//     this.search();
//     this.defaultuserdata = JSON.parse(JSON.stringify(this.userdata)); // 清空表单：解决方案1
//     // this.fileUploadURL = this.base_url + "/file/fileUpload";
//     // var tlanguage = localStorage.getItem("lan") || "zh";
//     // this.language = tlanguage == "zh" ? "0" : "1";
//     // alert(this.language);

//     //alert(this.base_url +);
//   },
//   mounted() {
//     // this.fileUploadURL = this.base_url + "/file/fileUpload";
//     // vuex actions
//     // this.$store.dispatch("usermanagermoudle/setoperation", "用户一览");
//     // vuex actions 辅助函数mapMutations 组件内方便调用
//     this.setoperation("用户一览");
//   },
//   watch: {
//     showAdd(val) {
//       if (val == false) {
//         // vuex actions
//         // this.$store.dispatch("usermanagermoudle/setoperation", "用户一览");
//         // vuex actions 辅助函数mapMutations 组件内方便调用
//         this.setoperation("用户一览");
//       }
//     },
//   },
// };
</script>
<style scoped>
.avatar {
  height: auto;
  width: auto;
  max-height: 300px;
  max-width: 100%;
}
</style>
